<template>
    <div>
        <home-header ></home-header>
        <home-swiper :list="swiperList"></home-swiper>
        <home-icons :list="iconList"></home-icons>
        <home-recommend :list="recommendList"></home-recommend>
        <home-weekend :list="weekendList"></home-weekend>
    </div>

</template>
<script>
 import HomeHeader from "./components/Header.vue"
 import HomeSwiper from './components/Swiper.vue'
 import HomeIcons from './components/Icons.vue'
 import HomeRecommend from './components/Recommend.vue'
 import HomeWeekend from './components/Weekend.vue'
 import axios from 'axios'
 import {mapState} from 'vuex'
    export default {
       name:"Home",
       components:{
           HomeHeader,
           HomeSwiper,
           HomeIcons,
           HomeRecommend,
           HomeWeekend
       },
       data(){
         return{
           lastCity:'',
           swiperList:[],
           iconList:[],
           recommendList:[],
           weekendList:[]
         }
       },
       computed:{
               ...mapState(['city'])
       },
       methods:{
           getHomeInfo(){
              axios.get('/api/index.json?city='+this.city).then(this.getHomeInfoSucc)
           },
           getHomeInfoSucc(res){
               res=res.data;
               if(res.ret&&res.data){
                   this.swiperList=res.data.swiperList;
                   this.iconList=res.data.iconList;
                   this.recommendList=res.data.recommendList;
                   this.weekendList=res.data.weekendList;
               }
               console.log(res);
           }
       },
       mounted(){
          //页面初次加载的时候一定会执行
          /*onsole.log('mounted');*/
          this.lastCity=this.city;
          this.getHomeInfo();
       },
       activated(){
         //页面重新显示的时候执行
         if(this.lastCity!==this.city){
            this.lastCity=this.city;
            this.getHomeInfo();
         }
         /*console.log('mounted')*/
       }
    }
</script>
<style>

</style>